<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二手易购 - 管理员后台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 样式保持不变 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #1a1a1a;
            --secondary: #333333;
            --accent: #666666;
            --light: #f5f5f5;
            --white: #ffffff;
            --dark: #000000;
            --light-gray: #e0e0e0;
            --medium-gray: #999999;
            --success: #28a745;
            --error: #dc3545;
            --info: #17a2b8;
            --warning: #ffc107;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            --sidebar-width: 250px;
            --header-height: 60px;
        }

        body {
            background: #f8f9fa;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 管理员后台整体布局 */
        .admin-container {
            display: flex;
            min-height: 100vh;
        }

        /* 侧边栏样式 */
        .admin-sidebar {
            width: var(--sidebar-width);
            background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
            color: var(--light);
            height: 100vh;
            position: fixed;
            overflow-y: auto;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            transition: var(--transition);
        }

        .sidebar-header {
            padding: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            text-align: center;
        }

        .sidebar-header h2 {
            color: var(--white);
            font-size: 22px;
            margin-top: 10px;
        }

        .sidebar-header p {
            color: var(--medium-gray);
            font-size: 14px;
        }

        .admin-logo {
            width: 60px;
            height: 60px;
            background: var(--primary);
            border-radius: 50%;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--white);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .sidebar-menu {
            padding: 20px 0;
        }

        .menu-item {
            padding: 12px 20px;
            display: flex;
            align-items: center;
            color: var(--light);
            text-decoration: none;
            transition: var(--transition);
            border-left: 3px solid transparent;
            margin: 5px 0;
        }

        .menu-item:hover {
            background: rgba(255, 255, 255, 0.05);
            border-left: 3px solid var(--info);
            color: var(--white);
        }

        .menu-item.active {
            background: rgba(255, 255, 255, 0.1);
            border-left: 3px solid var(--info);
            color: var(--white);
        }

        .menu-item i {
            margin-right: 12px;
            font-size: 18px;
            width: 24px;
            text-align: center;
        }

        /* 主内容区域 */
        .admin-main {
            flex: 1;
            margin-left: var(--sidebar-width);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 顶部导航栏 */
        .admin-header {
            height: var(--header-height);
            background: var(--white);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 25px;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-left {
            display: flex;
            align-items: center;
        }

        .toggle-sidebar {
            background: none;
            border: none;
            font-size: 20px;
            color: var(--dark);
            cursor: pointer;
            margin-right: 20px;
            display: none;
        }

        .page-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--dark);
        }

        .header-right {
            display: flex;
            align-items: center;
        }

        .admin-profile {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .admin-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--info) 0%, var(--primary) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-weight: bold;
            margin-right: 10px;
        }

        .admin-name {
            font-weight: 500;
            color: var(--dark);
            margin-right: 8px;
        }

        /* 内容区域 */
        .admin-content {
            flex: 1;
            padding: 25px;
            background: #f8f9fa;
        }

        .content-card {
            background: var(--white);
            border-radius: 12px;
            box-shadow: var(--shadow);
            padding: 25px;
            margin-bottom: 25px;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--light-gray);
        }

        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--dark);
        }

        /* 表格样式 */
        .admin-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .admin-table th {
            background: #f8f9fa;
            padding: 15px;
            text-align: left;
            font-weight: 600;
            color: var(--dark);
            border-bottom: 2px solid var(--light-gray);
        }

        .admin-table td {
            padding: 15px;
            border-bottom: 1px solid var(--light-gray);
            color: var(--secondary);
        }

        .admin-table tr:hover {
            background: rgba(0, 0, 0, 0.02);
        }

        .status {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-active {
            background: rgba(40, 167, 69, 0.1);
            color: var(--success);
        }

        .status-inactive {
            background: rgba(220, 53, 69, 0.1);
            color: var(--error);
        }

        .action-btn {
            padding: 6px 12px;
            border-radius: 5px;
            background: var(--light);
            border: none;
            color: var(--dark);
            cursor: pointer;
            margin-right: 5px;
            transition: var(--transition);
        }

        .action-btn:hover {
            background: var(--info);
            color: var(--white);
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            width: 600px;
            max-width: 90%;
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 20px;
            font-weight: 600;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #999;
        }

        .modal-body {
            padding: 20px;
        }

        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .form-input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        .form-textarea {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            min-height: 100px;
            resize: vertical;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background-color: var(--info);
            color: white;
        }

        .btn-primary:hover {
            background-color: #138496;
        }

        .btn-danger {
            background-color: var(--error);
            color: white;
        }

        .btn-danger:hover {
            background-color: #bd2130;
        }

        .btn-success {
            background-color: var(--success);
            color: white;
        }

        .btn-success:hover {
            background-color: #218838;
        }

        .btn-secondary {
            background-color: var(--medium-gray);
            color: white;
        }

        .btn-secondary:hover {
            background-color: #6c757d;
        }

        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .pagination-btn {
            padding: 8px 16px;
            margin: 0 5px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 5px;
            cursor: pointer;
        }

        .pagination-btn.active {
            background: var(--info);
            color: white;
            border-color: var(--info);
        }

        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .loading-spinner {
            display: flex;
            justify-content: center;
            padding: 20px;
        }

        .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top: 4px solid var(--info);
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }


        .user-detail-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .user-header {
            display: flex;
            align-items: center;
            gap: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3498db, #2c3e50);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: white;
            font-weight: bold;
        }

        .user-title h3 {
            font-size: 24px;
            margin-bottom: 5px;
            color: #2c3e50;
        }

        .user-title p {
            color: #7f8c8d;
            font-size: 14px;
        }

        .user-details-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .detail-card {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            display: flex;
            gap: 15px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }

        .detail-card.full-width {
            grid-column: 1 / -1;
        }

        .detail-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #e3f2fd;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #2196f3;
        }

        .detail-content h4 {
            margin-top: 0;
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .detail-content p {
            margin: 8px 0;
            color: #34495e;
        }

        .bio-content {
            padding: 15px;
            background: white;
            border-radius: 8px;
            border: 1px solid #eee;
            line-height: 1.6;
            margin-top: 10px;
        }

        .error-message {
            text-align: center;
            padding: 30px;
            color: #e74c3c;
        }

        .error-message i {
            font-size: 48px;
            margin-bottom: 15px;
            color: #e74c3c;
        }

        .error-message h3 {
            margin-bottom: 10px;
        }

        /* 新增API调试信息样式 */
        .api-debug {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            font-family: monospace;
            font-size: 14px;
            border: 1px solid #e0e0e0;
            max-height: 200px;
            overflow: auto;
        }

        .api-debug h4 {
            margin-top: 0;
            color: #2c3e50;
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 8px;
        }

        .bio-content {
            padding: 15px;
            background: white;
            border-radius: 8px;
            border: 1px solid #eee;
            line-height: 1.6;
            margin-top: 10px;
        }

        .error-message {
            text-align: center;
            padding: 30px;
            color: #e74c3c;
        }

        .error-message i {
            font-size: 48px;
            margin-bottom: 15px;
            color: #e74c3c;
        }

        .error-message h3 {
            margin-bottom: 10px;
        }

        .avatar-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3498db, #2c3e50);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: white;
            margin: 0 auto;
        }

        .user-info-section {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
        }

        .user-info-section h3 {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0e0e0;
            color: #2c3e50;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }

        .info-item {
            display: flex;
            flex-direction: column;
        }

        .info-item label {
            font-weight: 600;
            color: #7f8c8d;
            margin-bottom: 5px;
            font-size: 14px;
        }

        .info-item div {
            padding: 8px 12px;
            background: white;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
        }

        .success-message {
            text-align: center;
            padding: 30px;
            color: #27ae60;
        }

        .success-message i {
            font-size: 48px;
            margin-bottom: 15px;
            color: #2ecc71;
        }

        .success-message p {
            font-size: 18px;
            margin: 20px 0;
        }

        .success-message button {
            margin-top: 15px;
        }

        .bio-content {
            padding: 15px;
            background: white;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
            min-height: 100px;
            line-height: 1.6;
        }

        .error-message {
            text-align: center;
            padding: 30px;
            color: #e74c3c;
        }

        .error-message i {
            font-size: 48px;
            margin-bottom: 15px;
        }

        .delete-confirmation {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .delete-warning {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #fef3e7;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .delete-warning i {
            font-size: 40px;
            color: #ff9800;
        }

        .delete-message p {
            margin: 10px 0;
            font-size: 16px;
        }

        .warning-text {
            color: #e74c3c;
            font-weight: bold;
            margin-top: 15px;
        }

        .deleting-status {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px 0;
        }

        .deleting-status .spinner {
            margin-bottom: 20px;
        }

        .success-message {
            text-align: center;
            padding: 30px;
        }

        .success-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #eafaf1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }

        .success-icon i {
            font-size: 40px;
            color: #2ecc71;
        }

        .success-message h3 {
            color: #27ae60;
            margin-bottom: 10px;
        }

        .success-message p {
            margin-bottom: 20px;
            font-size: 16px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .admin-sidebar {
                transform: translateX(-100%);
            }

            .admin-sidebar.active {
                transform: translateX(0);
            }

            .admin-main {
                margin-left: 0;
            }

            .toggle-sidebar {
                display: block;
            }
        }

        @media (max-width: 768px) {
            .admin-table {
                display: block;
                overflow-x: auto;
            }
        }
    </style>
</head>
<body>
<!-- 管理员后台 -->
<div class="admin-container">
    <!-- 侧边导航栏 -->
    <div class="admin-sidebar" id="sidebar">
        <div class="sidebar-header">
            <div class="admin-logo">
                <i class="fas fa-cube"></i>
            </div>
            <h2>二手易购</h2>
            <p>管理员后台系统</p>
        </div>

        <div class="sidebar-menu">
            <a href="#" class="menu-item active" data-target="user-manage">
                <i class="fas fa-users"></i>
                <span>用户管理</span>
            </a>
            <a href="#" class="menu-item" data-target="goods-manage">
                <i class="fas fa-box"></i>
                <span>商品管理</span>
            </a>
            <a href="#" class="menu-item" data-target="orders-manage">
                <i class="fas fa-shopping-cart"></i>
                <span>订单管理</span>
            </a>
            <a href="#" class="menu-item" data-target="comments-manage">
                <i class="fas fa-comments"></i>
                <span>评论管理</span>
            </a>
            <a href="#" class="menu-item" data-target="profile-manage">
                <i class="fas fa-user-cog"></i>
                <span>个人管理</span>
            </a>
            <a href="#" class="menu-item" id="logoutBtn">
                <i class="fas fa-sign-out-alt"></i>
                <span>退出登录</span>
            </a>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="admin-main">
        <!-- 顶部导航栏 -->
        <header class="admin-header">
            <div class="header-left">
                <button class="toggle-sidebar" id="toggleSidebar">
                    <i class="fas fa-bars"></i>
                </button>
                <div class="page-title" id="pageTitle">用户管理</div>
            </div>
            <div class="header-right">
                <div class="admin-profile">
                    <div class="admin-avatar" id="adminAvatar">A</div>
                    <div class="admin-name" id="adminName">管理员</div>
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
        </header>

        <!-- 内容区域 -->
        <div class="admin-content" id="adminContent">
            <div class="loading-spinner">
                <div class="spinner"></div>
            </div>
        </div>
    </div>
</div>

<!-- 详情模态框 -->
<div class="modal" id="detailModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title" id="modalTitle">详细信息</h3>
            <button class="modal-close" id="closeModal">&times;</button>
        </div>
        <div class="modal-body" id="modalBody">
            <!-- 动态内容 -->
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" id="closeModalBtn">关闭</button>
        </div>
    </div>
</div>

<!-- 确认删除模态框 -->
<div class="modal" id="confirmDeleteModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">确认删除</h3>
            <button class="modal-close" id="closeDeleteModal">&times;</button>
        </div>
        <div class="modal-body">
            <p>您确定要删除这条记录吗？此操作不可撤销。</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" id="cancelDeleteBtn">取消</button>
            <button class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
        </div>
    </div>
</div>

<script>
    // 全局变量
    let currentAdmin = null;
    let currentModule = 'user-manage';
    let currentPage = 1;
    let totalPages = 1;
    let currentItemId = null;
    let currentItemType = null;
    let debugMode = true; // 调试模式开关

    // 后端API地址
    const API_BASE = 'http://localhost:8080';
    const AUTH_TOKEN = 'Bearer ' + localStorage.getItem('token');

    // 清除用户搜索
    function clearSearch() {
        document.getElementById('userSearch').value = '';
        loadUserManagement(1);
    }

    // 清除商品搜索
    function clearGoodsSearch() {
        document.getElementById('goodsSearch').value = '';
        loadGoodsManagement(1);
    }

    // 清除订单搜索
    function clearOrderSearch() {
        document.getElementById('orderSearch').value = '';
        loadOrdersManagement(1);
    }

    // 清除评论搜索
    function clearCommentSearch() {
        document.getElementById('commentSearch').value = '';
        loadCommentsManagement(1);
    }

    // 页面加载时初始化
    document.addEventListener('DOMContentLoaded', function() {
        loadAdminInfo();
        setupEventListeners();
        loadUserManagement();
    });

    // 加载管理员信息
    function loadAdminInfo() {
        const userInfo = JSON.parse(localStorage.getItem('userInfo'));
        if (userInfo) {
            document.getElementById('adminName').textContent = userInfo.username;
            document.getElementById('adminAvatar').textContent = userInfo.username.charAt(0).toUpperCase();
            currentAdmin = userInfo;
        }
    }

    // 设置事件监听器
    function setupEventListeners() {
        // 菜单项点击
        document.querySelectorAll('.menu-item').forEach(item => {
            item.addEventListener('click', function(e) {
                if (this.id === 'logoutBtn') return;

                e.preventDefault();
                document.querySelectorAll('.menu-item').forEach(el => {
                    el.classList.remove('active');
                });
                this.classList.add('active');

                const target = this.getAttribute('data-target');
                currentModule = target;
                document.getElementById('pageTitle').textContent = this.querySelector('span').textContent;

                switch(target) {
                    case 'user-manage':
                        loadUserManagement();
                        break;
                    case 'goods-manage':
                        loadGoodsManagement();
                        break;
                    case 'orders-manage':
                        loadOrdersManagement();
                        break;
                    case 'comments-manage':
                        loadCommentsManagement();
                        break;
                    case 'profile-manage':
                        loadProfileManagement();
                        break;
                }
            });

            // 事件委托处理动态按钮
            document.addEventListener('click', function(e) {
                // 处理查看按钮
                if (e.target.classList.contains('view-btn')) {
                    const userId = e.target.dataset.id;
                    const type = e.target.dataset.type;
                    if (userId && type) {
                        viewItem(type, parseInt(userId));
                    }
                }

                // 处理删除按钮
                if (e.target.classList.contains('delete-btn')) {
                    const userId = e.target.dataset.id;
                    const type = e.target.dataset.type;
                    if (userId && type) {
                        confirmDelete(type, parseInt(userId));
                    }
                }
            });
        });

        // 退出登录
        document.getElementById('logoutBtn').addEventListener('click', function(e) {
            e.preventDefault();
            localStorage.removeItem('userInfo');
            localStorage.removeItem('token');
            window.location.href = 'login.html';
        });

        document.getElementById('adminContent').addEventListener('click', function(e) {
            // 处理查看按钮
            if (e.target.classList.contains('view-btn')) {
                const userId = e.target.dataset.id;
                const type = e.target.dataset.type;
                if (userId && type) {
                    viewItem(type, parseInt(userId));
                }
            }

            // 处理删除按钮
            if (e.target.classList.contains('delete-btn')) {
                const userId = e.target.dataset.id;
                const type = e.target.dataset.type;
                if (userId && type) {
                    confirmDelete(type, parseInt(userId));
                }
            }
        });

        // 侧边栏切换
        document.getElementById('toggleSidebar').addEventListener('click', function() {
            document.getElementById('sidebar').classList.toggle('active');
        });

        // 模态框关闭
        document.getElementById('closeModal').addEventListener('click', closeModal);
        document.getElementById('closeModalBtn').addEventListener('click', closeModal);
        document.getElementById('closeDeleteModal').addEventListener('click', closeDeleteModal);
        document.getElementById('cancelDeleteBtn').addEventListener('click', closeDeleteModal);
        document.getElementById('confirmDeleteBtn').addEventListener('click', deleteItem);
    }

    // 加载用户管理
    function loadUserManagement(page = 1, keyword = '') {
        currentPage = page;
        currentModule = 'user-manage';

        // 获取搜索关键词
        const searchInput = document.getElementById('userSearch');
        if (searchInput) {
            keyword = searchInput.value || keyword;
        }

        document.getElementById('adminContent').innerHTML = `
            <div class="loading-spinner">
                <div class="spinner"></div>
                <p>加载用户数据中...</p>
            </div>
        `;

        // 调用API获取用户数据
        fetch(`${API_BASE}/admin/users?page=${page}&size=15&keyword=${encodeURIComponent(keyword)}`, {
            headers: {
                'Authorization': AUTH_TOKEN,
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('获取用户数据失败，状态码: ' + response.status);
                }
                return response.json();
            })
            .then(responseData => {
                // 统一处理分页数据结构
                const data = responseData.data || responseData;
                const records = data.records || [];
                const pages = data.pages || 1;
                const total = data.total || records.length;

                let contentHtml = `
                <div class="content-card">
                    <div class="card-header">
                        <div class="card-title">用户管理</div>
                        <div>
                            <input type="text" id="userSearch" placeholder="搜索用户 (姓名/手机/简介)..."
                                   class="form-input" style="width: 250px; margin-right: 10px;"
                                   title="支持搜索用户名、手机号和简介内容"
                                   value="${keyword}">
                            <button class="action-btn" onclick="searchUsers()">
                                <i class="fas fa-search"></i> 搜索
                            </button>
                            <button class="action-btn" style="margin-left: 5px;" onclick="clearSearch()">
                                <i class="fas fa-times"></i> 清除
                            </button>
                        </div>
                    </div>
            `;

                // 显示搜索结果信息
                if (keyword) {
                    contentHtml += `
                    <div class="search-info">
                        <i class="fas fa-info-circle"></i>
                        搜索关键词: <strong>"${keyword}"</strong> |
                        找到 ${total} 条匹配记录
                    </div>
                `;
                }

                contentHtml += `
                    <table class="admin-table">
                        <thead>
                            <tr>
                                <th>用户ID</th>
                                <th>用户名</th>
                                <th>手机号</th>
                                <th>简介</th>
                                <th>账户余额</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
            `;

                // 处理每条用户记录
                records.forEach(user => {
                    const userId = (user.uId !== undefined && user.uId !== null) ? user.uId : 'N/A';
                    const userName = user.uName || '未知用户';
                    const phone = user.uPhoneNumber || '未设置';
                    const bio = user.uBio || '暂无简介';
                    const balance = user.uBalance ? parseFloat(user.uBalance).toFixed(2) : "0.00";

                    contentHtml += `
                        <tr>
                        <td>${userId}</td>
                        <td>${userName}</td>
                        <td>${phone}</td>
                        <td>${bio}</td>
                        <td>¥${balance}</td>
                        <td>
                            <button class="action-btn view-btn"
                                    data-type="user"
                                    data-id="${userId}">
                                查看
                            </button>
                            <button class="action-btn delete-btn"
                                    data-type="user"
                                    data-id="${userId}">
                                删除
                            </button>
                        </td>
                    </tr>
                `;
                });

                contentHtml += `
                        </tbody>
                    </table>

                    <div class="pagination">
                        <button class="pagination-btn" ${page === 1 ? 'disabled' : ''}
                                onclick="loadUserManagement(${page - 1}, '${keyword}')">
                            <i class="fas fa-chevron-left"></i> 上一页
                        </button>

                        ${generatePagination(page, pages, 'loadUserManagement', keyword)}

                        <button class="pagination-btn" ${page >= pages ? 'disabled' : ''}
                                onclick="loadUserManagement(${page + 1}, '${keyword}')">
                            下一页 <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            `;

                document.getElementById('adminContent').innerHTML = contentHtml;
            })
            .catch(error => {
                console.error('加载用户数据失败:', error);
                document.getElementById('adminContent').innerHTML = `
                <div class="content-card">
                    <div class="card-header">
                        <div class="card-title">用户管理</div>
                    </div>
                    <div style="padding: 20px; text-align: center; color: var(--error);">
                        ${error.message || '加载用户数据失败'}
                    </div>
                </div>`;
            });
    }


    // 搜索用户
    function searchUsers() {
        const keyword = document.getElementById('userSearch').value;
        loadUserManagement(1, keyword);
    }

    // 加载商品管理
    function loadGoodsManagement(page = 1, keyword = '') {
        currentPage = page;
        currentModule = 'goods-manage';

        // 获取搜索关键词
        const searchInput = document.getElementById('goodsSearch');
        if (searchInput) {
            keyword = searchInput.value || keyword;
        }

        document.getElementById('adminContent').innerHTML = `
        <div class="loading-spinner">
            <div class="spinner"></div>
            <p>加载商品数据中...</p>
        </div>
    `;

        fetch(`${API_BASE}/admin/goods?page=${page}&size=15&keyword=${encodeURIComponent(keyword)}`, {
            headers: {
                'Authorization': AUTH_TOKEN,
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('获取商品数据失败，状态码: ' + response.status);
                }
                return response.json();
            })
            .then(responseData => {
                const data = responseData.data || responseData;
                const records = data.records || [];
                const pages = data.pages || 1;
                const total = data.total || records.length;

                let contentHtml = `
        <div class="content-card">
            <div class="card-header">
                <div class="card-title">商品管理</div>
                <div>
                    <input type="text" id="goodsSearch" placeholder="搜索商品 (名称/分类)..."
                           class="form-input" style="width: 250px; margin-right: 10px;"
                           title="支持搜索商品名称和分类"
                           value="${keyword}">
                    <button class="action-btn" onclick="searchGoods()">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                    <button class="action-btn" style="margin-left: 5px;" onclick="clearGoodsSearch()">
                        <i class="fas fa-times"></i> 清除
                    </button>
                </div>
            </div>
        `;

                if (keyword) {
                    contentHtml += `
            <div class="search-info">
                <i class="fas fa-info-circle"></i>
                搜索关键词: <strong>"${keyword}"</strong> |
                找到 ${total} 条匹配记录
            </div>
            `;
                }

                contentHtml += `
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>商品ID</th>
                        <th>商品名称</th>
                        <th>价格</th>
                        <th>库存</th>
                        <th>分类</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
        `;

                records.forEach(goods => {
                    const statusClass = goods.gIsActive ? 'status-active' : 'status-inactive';
                    const statusText = goods.gIsActive ? '上架中' : '已下架';

                    contentHtml += `
                <tr>
                    <td>${goods.gId || 'N/A'}</td>
                    <td>${goods.gName || '未知商品'}</td>
                    <td>¥${goods.gPrice ? parseFloat(goods.gPrice).toFixed(2) : "0.00"}</td>
                    <td>${goods.gStockQuantity || 0}</td>
                    <td>${goods.gCategory || '未分类'}</td>
                    <td><span class="status ${statusClass}">${statusText}</span></td>
                    <td>
                        <button class="action-btn view-btn"
                                data-type="goods"
                                data-id="${goods.gId}">
                            查看
                        </button>
                        <button class="action-btn delete-btn"
                                data-type="goods"
                                data-id="${goods.gId}">
                            删除
                        </button>
                    </td>
                </tr>
            `;
                });

                contentHtml += `
                </tbody>
            </table>

            <div class="pagination">
                <button class="pagination-btn" ${page === 1 ? 'disabled' : ''}
                        onclick="loadGoodsManagement(${page - 1}, '${keyword}')">
                    <i class="fas fa-chevron-left"></i> 上一页
                </button>

                ${generatePagination(page, pages, 'loadGoodsManagement', keyword)}

                <button class="pagination-btn" ${page >= pages ? 'disabled' : ''}
                        onclick="loadGoodsManagement(${page + 1}, '${keyword}')">
                    下一页 <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
        `;

                document.getElementById('adminContent').innerHTML = contentHtml;
            })
            .catch(error => {
                console.error('加载商品数据失败:', error);
                document.getElementById('adminContent').innerHTML = `
        <div class="content-card">
            <div class="card-header">
                <div class="card-title">商品管理</div>
            </div>
            <div style="padding: 20px; text-align: center; color: var(--error);">
                ${error.message || '加载商品数据失败'}
            </div>
        </div>`;
            });
    }

    // 搜索商品
    function searchGoods() {
        const keyword = document.getElementById('goodsSearch').value;
        loadGoodsManagement(1, keyword);
    }


    // 加载订单管理
    function loadOrdersManagement(page = 1, keyword = '') {
        currentPage = page;
        currentModule = 'orders-manage';

        // 获取搜索关键词
        const searchInput = document.getElementById('orderSearch');
        if (searchInput) {
            keyword = searchInput.value || keyword;
        }

        document.getElementById('adminContent').innerHTML = `
        <div class="loading-spinner">
            <div class="spinner"></div>
            <p>加载订单数据中...</p>
        </div>
    `;

        fetch(`${API_BASE}/admin/orders?page=${page}&size=15&keyword=${encodeURIComponent(keyword)}`, {
            headers: {
                'Authorization': AUTH_TOKEN,
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('获取订单数据失败，状态码: ' + response.status);
                }
                return response.json();
            })
            .then(responseData => {
                const data = responseData.data || responseData;
                const records = data.records || [];
                const pages = data.pages || 1;
                const total = data.total || records.length;

                let contentHtml = `
        <div class="content-card">
            <div class="card-header">
                <div class="card-title">订单管理</div>
                <div>
                    <input type="text" id="orderSearch" placeholder="搜索订单 (ID/商品ID/用户ID)..."
                           class="form-input" style="width: 250px; margin-right: 10px;"
                           title="支持搜索订单ID、商品ID和用户ID"
                           value="${keyword}">
                    <button class="action-btn" onclick="searchOrders()">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                    <button class="action-btn" style="margin-left: 5px;" onclick="clearOrderSearch()">
                        <i class="fas fa-times"></i> 清除
                    </button>
                </div>
            </div>
        `;

                if (keyword) {
                    contentHtml += `
            <div class="search-info">
                <i class="fas fa-info-circle"></i>
                搜索关键词: <strong>"${keyword}"</strong> |
                找到 ${total} 条匹配记录
            </div>
            `;
                }

                contentHtml += `
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>订单ID</th>
                        <th>商品ID</th>
                        <th>卖家ID</th>
                        <th>买家ID</th>
                        <th>金额</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
        `;

                records.forEach(order => {
                    const statusClass = order.oStatus === '已完成' ? 'status-active' :
                        order.oStatus === '已取消' ? 'status-inactive' : 'status-active';

                    contentHtml += `
                <tr>
                    <td>${order.oId || 'N/A'}</td>
                    <td>${order.oGoodsId || 'N/A'}</td>
                    <td>${order.oUserIdOne || 'N/A'}</td>
                    <td>${order.oUserIdTwo || 'N/A'}</td>
                    <td>¥${order.oTotalAmount ? parseFloat(order.oTotalAmount).toFixed(2) : "0.00"}</td>
                    <td><span class="status ${statusClass}">${order.oStatus || '未知'}</span></td>
                    <td>
                        <button class="action-btn view-btn"
                                data-type="order"
                                data-id="${order.oId}">
                            查看
                        </button>
                        <button class="action-btn delete-btn"
                                data-type="order"
                                data-id="${order.oId}">
                            删除
                        </button>
                    </td>
                </tr>
            `;
                });

                contentHtml += `
                </tbody>
            </table>

            <div class="pagination">
                <button class="pagination-btn" ${page === 1 ? 'disabled' : ''}
                        onclick="loadOrdersManagement(${page - 1}, '${keyword}')">
                    <i class="fas fa-chevron-left"></i> 上一页
                </button>

                ${generatePagination(page, pages, 'loadOrdersManagement', keyword)}

                <button class="pagination-btn" ${page >= pages ? 'disabled' : ''}
                        onclick="loadOrdersManagement(${page + 1}, '${keyword}')">
                    下一页 <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
        `;

                document.getElementById('adminContent').innerHTML = contentHtml;
            })
            .catch(error => {
                console.error('加载订单数据失败:', error);
                document.getElementById('adminContent').innerHTML = `
        <div class="content-card">
            <div class="card-header">
                <div class="card-title">订单管理</div>
            </div>
            <div style="padding: 20px; text-align: center; color: var(--error);">
                ${error.message || '加载订单数据失败'}
            </div>
        </div>`;
            });
    }

    // 搜索订单
    function searchOrders() {
        const keyword = document.getElementById('orderSearch').value;
        loadOrdersManagement(1, keyword);
    }

    // 加载评论管理
    function loadCommentsManagement(page = 1, keyword = '') {
        currentPage = page;
        currentModule = 'comments-manage';

        // 获取搜索关键词
        const searchInput = document.getElementById('commentSearch');
        if (searchInput) {
            keyword = searchInput.value || keyword;
        }

        document.getElementById('adminContent').innerHTML = `
        <div class="loading-spinner">
            <div class="spinner"></div>
            <p>加载评论数据中...</p>
        </div>
    `;

        fetch(`${API_BASE}/admin/comments?page=${page}&size=15&keyword=${encodeURIComponent(keyword)}`, {
            headers: {
                'Authorization': AUTH_TOKEN,
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('获取评论数据失败，状态码: ' + response.status);
                }
                return response.json();
            })
            .then(responseData => {
                const data = responseData.data || responseData;
                const records = data.records || [];
                const pages = data.pages || 1;
                const total = data.total || records.length;

                let contentHtml = `
        <div class="content-card">
            <div class="card-header">
                <div class="card-title">评论管理</div>
                <div>
                    <input type="text" id="commentSearch" placeholder="搜索评论内容..."
                           class="form-input" style="width: 250px; margin-right: 10px;"
                           value="${keyword}">
                    <button class="action-btn" onclick="searchComments()">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                    <button class="action-btn" style="margin-left: 5px;" onclick="clearCommentSearch()">
                        <i class="fas fa-times"></i> 清除
                    </button>
                </div>
            </div>
        `;

                if (keyword) {
                    contentHtml += `
            <div class="search-info">
                <i class="fas fa-info-circle"></i>
                搜索关键词: <strong>"${keyword}"</strong> |
                找到 ${total} 条匹配记录
            </div>
            `;
                }

                contentHtml += `
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>评论ID</th>
                        <th>用户ID</th>
                        <th>商品ID</th>
                        <th>评论内容</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
        `;

                records.forEach(comment => {
                    // 截取前40个字符显示
                    const shortContent = comment.cBio && comment.cBio.length > 40 ?
                        comment.cBio.substring(0, 40) + '...' : comment.cBio;

                    contentHtml += `
                <tr>
                    <td>${comment.cId || 'N/A'}</td>
                    <td>${comment.cUserId || 'N/A'}</td>
                    <td>${comment.cGoodsId || 'N/A'}</td>
                    <td>${shortContent || '无内容'}</td>
                    <td>
                        <button class="action-btn view-btn"
                                data-type="comment"
                                data-id="${comment.cId}">
                            查看
                        </button>
                        <button class="action-btn delete-btn"
                                data-type="comment"
                                data-id="${comment.cId}">
                            删除
                        </button>
                    </td>
                </tr>
            `;
                });

                contentHtml += `
                </tbody>
            </table>

            <div class="pagination">
                <button class="pagination-btn" ${page === 1 ? 'disabled' : ''}
                        onclick="loadCommentsManagement(${page - 1}, '${keyword}')">
                    <i class="fas fa-chevron-left"></i> 上一页
                </button>

                ${generatePagination(page, pages, 'loadCommentsManagement', keyword)}

                <button class="pagination-btn" ${page >= pages ? 'disabled' : ''}
                        onclick="loadCommentsManagement(${page + 1}, '${keyword}')">
                    下一页 <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
        `;

                document.getElementById('adminContent').innerHTML = contentHtml;
            })
            .catch(error => {
                console.error('加载评论数据失败:', error);
                document.getElementById('adminContent').innerHTML = `
        <div class="content-card">
            <div class="card-header">
                <div class="card-title">评论管理</div>
            </div>
            <div style="padding: 20px; text-align: center; color: var(--error);">
                ${error.message || '加载评论数据失败'}
            </div>
        </div>`;
            });
    }

    // 搜索评论
    function searchComments() {
        const keyword = document.getElementById('commentSearch').value;
        loadCommentsManagement(1, keyword);
    }


    // 加载个人管理
    function loadProfileManagement() {
        currentModule = 'profile-manage';

        // 显示加载状态
        document.getElementById('adminContent').innerHTML = `
            <div class="loading-spinner">
                <div class="spinner"></div>
            </div>
        `;

        // 调用后端API获取管理员详情
        const userId = currentAdmin.userId;
        fetch(`${API_BASE}/user/info/${userId}`, {
            headers: {
                'Authorization': AUTH_TOKEN
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('获取管理员详情失败');
                }
                return response.json();
            })
            .then(adminDetail => {
                const contentHtml = `
                <div class="content-card">
                    <div class="card-header">
                        <div class="card-title">个人管理</div>
                    </div>

                    <div style="display: flex; margin-bottom: 30px;">
                        <div style="margin-right: 30px;">
                            <div class="admin-avatar" style="width: 100px; height: 100px; font-size: 40px;">
                                ${adminDetail.uName.charAt(0).toUpperCase()}
                            </div>
                        </div>
                        <div style="flex: 1;">
                            <h3 style="margin-bottom: 15px;">${adminDetail.uName}</h3>
                            <p><strong>用户ID：</strong> ${adminDetail.uId}</p>
                            <p><strong>手机号：</strong> ${adminDetail.uPhoneNumber || '未设置'}</p>
                            <p><strong>账户余额：</strong> <span style="font-size: 20px; color: #e74c3c;">¥${adminDetail.uBalance.toFixed(2)}</span></p>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">个人简介</label>
                        <textarea class="form-textarea" id="adminBio">${adminDetail.uBio || ''}</textarea>
                    </div>

                    <div class="form-group">
                        <button class="btn btn-primary" onclick="updateAdminBio()">更新简介</button>
                    </div>

                    <div class="card-header" style="margin-top: 30px; margin-bottom: 20px;">
                        <div class="card-title">修改密码</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">原密码</label>
                        <input type="password" class="form-input" id="oldPassword">
                    </div>

                    <div class="form-group">
                        <label class="form-label">新密码</label>
                        <input type="password" class="form-input" id="newPassword">
                    </div>

                    <div class="form-group">
                        <label class="form-label">确认新密码</label>
                        <input type="password" class="form-input" id="confirmPassword">
                    </div>

                    <div class="form-group">
                        <button class="btn btn-primary" onclick="changeAdminPassword()">修改密码</button>
                    </div>

                    <div class="card-header" style="margin-top: 30px; margin-bottom: 20px;">
                        <div class="card-title">账户充值</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">充值金额 (¥)</label>
                        <input type="number" class="form-input" id="rechargeAmount" min="1" value="100">
                    </div>

                    <div class="form-group">
                        <button class="btn btn-success" onclick="rechargeAdminBalance()">立即充值</button>
                    </div>
                </div>
            `;

                document.getElementById('adminContent').innerHTML = contentHtml;
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('adminContent').innerHTML = `
                <div class="content-card">
                    <div class="card-header">
                        <div class="card-title">个人管理</div>
                    </div>
                    <div style="padding: 20px; text-align: center; color: var(--error);">
                        ${error.message}
                    </div>
                </div>
            `;
            });
    }

    // 查看项目详情
    function viewItem(type, id) {
        currentItemType = type;
        currentItemId = id;

        // 显示加载状态
        document.getElementById('modalBody').innerHTML = `
            <div class="loading-spinner">
                <div class="spinner"></div>
            </div>
        `;
        document.getElementById('detailModal').style.display = 'flex';

        // 调用后端API获取详情
        let apiUrl = '';
        switch(type) {
            case 'user': apiUrl = `${API_BASE}/admin/users/${id}`; break;
            case 'goods': apiUrl = `${API_BASE}/admin/goods/${id}`; break;
            case 'order': apiUrl = `${API_BASE}/admin/orders/${id}`; break;
            case 'comment': apiUrl = `${API_BASE}/admin/comments/${id}`; break;
        }

        fetch(apiUrl, {
            headers: { 'Authorization': AUTH_TOKEN }
        })
            .then(response => {
                if (!response.ok) throw new Error('获取详情失败');
                return response.json();
            })
            .then(responseData => {
                // 处理API响应结构
                const item = responseData.data || responseData;

                // 调试信息
                if (debugMode) {
                    console.log(`获取${type}详情:`, item);
                }

                let modalTitle = '';
                let modalContent = '';

                switch(type) {
                    case 'user':
                        // 修复字段映射问题
                        modalTitle = '用户详情';
                        modalContent = `
                <div class="user-detail-container">
                    <div class="user-header">
                        <div class="user-avatar">
                            ${item.uName ? item.uName.charAt(0).toUpperCase() : 'U'}
                        </div>
                        <div class="user-title">
                            <h3>${item.uName || '未知用户'}</h3>
                            <p>用户ID: ${item.uId || 'N/A'}</p>
                        </div>
                    </div>

                    <div class="user-details-grid">
                        <div class="detail-card">
                            <div class="detail-icon">
                                <i class="fas fa-user"></i>
                            </div>
                            <div class="detail-content">
                                <h4>基本信息</h4>
                                <p><strong>用户名:</strong> ${item.uName || '未知'}</p>
                                <p><strong>手机号:</strong> ${item.uPhoneNumber || '未设置'}</p>
                                <p><strong>管理员:</strong> ${item.uIsAdmin ? '是' : '否'}</p>
                            </div>
                        </div>

                        <div class="detail-card">
                            <div class="detail-icon">
                                <i class="fas fa-wallet"></i>
                            </div>
                            <div class="detail-content">
                                <h4>账户信息</h4>
                                <p><strong>账户余额:</strong> ¥${item.uBalance ? item.uBalance.toFixed(2) : '0.00'}</p>
                            </div>
                        </div>

                        <div class="detail-card full-width">
                            <div class="detail-icon">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div class="detail-content">
                                <h4>个人简介</h4>
                                <div class="bio-content">
                                    ${item.uBio || '该用户暂无简介'}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                `;
                        break;

                    case 'goods':
                        modalTitle = '商品详情';
                        modalContent = `
                        <div class="form-group">
                            <label class="form-label">商品ID</label>
                            <div class="form-input" style="background: #f8f9fa;">${item.gId}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">商品名称</label>
                            <div class="form-input" style="background: #f8f9fa;">${item.gName}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">价格</label>
                            <div class="form-input" style="background: #f8f9fa;">¥${item.gPrice.toFixed(2)}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">库存数量</label>
                            <div class="form-input" style="background: #f8f9fa;">${item.gStockQuantity}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">商品类别</label>
                            <div class="form-input" style="background: #f8f9fa;">${item.gCategory}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">上架状态</label>
                            <div class="form-input" style="background: #f8f9fa;">${item.gIsActive ? '上架中' : '已下架'}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">商品描述</label>
                            <div class="form-input" style="background: #f8f9fa; min-height: 80px;">
                                ${item.gDescription || '无描述信息'}
                            </div>
                        </div>
                    `;
                        break;

                    case 'order':
                        modalTitle = '订单详情';
                        modalContent = `
                        <div class="form-group">
                            <label class="form-label">订单ID</label>
                            <div class="form-input" style="background: #f8f9fa;">${item.oId}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">商品ID</label>
                            <div class="form-input" style="background: #f8f9fa;">${item.oGoodsId}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">卖家ID</label>
                            <div class="form-input" style="background: #f8f9fa;">${item.oUserIdOne}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">买家ID</label>
                            <div class="form-input" style="background: #f8f9fa;">${item.oUserIdTwo}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">交易金额</label>
                            <div class="form-input" style="background: #f8f9fa;">¥${item.oTotalAmount.toFixed(2)}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">订单状态</label>
                            <div class="form-input" style="background: #f8f9fa;">${item.oStatus}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">创建时间</label>
                            <div class="form-input" style="background: #f8f9fa;">${item.oCreateTime || '未知'}</div>
                        </div>
                    `;
                        break;

                    case 'comment':
                        modalTitle = '评论详情';
                        modalContent = `
                        <div class="form-group">
                            <label class="form-label">评论ID</label>
                            <div class="form-input" style="background: #f8f9fa;">${item.cId}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">用户ID</label>
                            <div class="form-input" style="background: #f8f9fa;">${item.cUserId}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">商品ID</label>
                            <div class="form-input" style="background: #f8f9fa;">${item.cGoodsId}</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">评论内容</label>
                            <div class="form-input" style="background: #f8f9fa; min-height: 100px;">
                                ${item.cBio}
                            </div>
                        </div>
                    `;
                        break;
                }

                document.getElementById('modalTitle').textContent = modalTitle;
                document.getElementById('modalBody').innerHTML = modalContent;
            })
            .catch(error => {
                document.getElementById('modalBody').innerHTML = `
            <div class="error-message">
                <i class="fas fa-exclamation-triangle"></i>
                <p>${error.message || '加载详情失败'}</p>
            </div>
        `;
            });
    }

    // 确认删除
    function confirmDelete(type, id) {
        currentItemType = type;
        currentItemId = id;

        const itemName = getItemTypeName(type);

        // 更新确认删除模态框内容
        document.getElementById('confirmDeleteModal').querySelector('.modal-title').textContent = `确认删除${itemName}`;
        document.getElementById('confirmDeleteModal').querySelector('.modal-body').innerHTML = `
        <div class="delete-confirmation">
            <div class="delete-warning">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="delete-message">
                <p>您确定要删除该${itemName}吗？</p>
                <p><strong>ID: ${id}</strong></p>
                <p class="warning-text">此操作不可撤销，所有相关数据将被永久删除！</p>
            </div>
        </div>
    `;

        // 显示确认模态框
        document.getElementById('confirmDeleteModal').style.display = 'flex';
    }

    // 实际删除函数
    function deleteItem() {
        closeDeleteModal();

        const itemName = getItemTypeName(currentItemType);
        const originalContent = document.getElementById('adminContent').innerHTML;

        // 显示删除中状态
        document.getElementById('adminContent').innerHTML = `
        <div class="content-card">
            <div class="deleting-status">
                <div class="spinner"></div>
                <p>正在删除${itemName} (ID: ${currentItemId})...</p>
            </div>
        </div>
    `;

        // 调用后端API删除项目
        fetch(`${API_BASE}/admin/${currentItemType}s/${currentItemId}`, {
            method: 'DELETE',
            headers: { 'Authorization': AUTH_TOKEN }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('删除失败');
                }
                return response.json();
            })
            .then(result => {
                if (result) {
                    // 显示成功消息
                    document.getElementById('adminContent').innerHTML = `
                <div class="content-card">
                    <div class="success-message">
                        <div class="success-icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <h3>删除成功</h3>
                        <p>已成功删除${itemName} (ID: ${currentItemId})</p>
                        <button class="btn btn-primary" onclick="loadUserManagement()">
                            返回用户列表
                        </button>
                    </div>
                </div>
            `;
                } else {
                    throw new Error('删除操作未成功');
                }
            })
            .catch(error => {
                console.error('删除失败:', error);
                document.getElementById('adminContent').innerHTML = originalContent;
                alert(`删除${itemName}失败: ${error.message}`);
            });
    }

    // 更新管理员简介
    function updateAdminBio() {
        const newBio = document.getElementById('adminBio').value;
        const userId = currentAdmin.userId;

        // 调用后端API更新简介
        fetch(`${API_BASE}/admin/profile/bio?userId=${userId}&bio=${encodeURIComponent(newBio)}`, {
            method: 'PUT',
            headers: {
                'Authorization': AUTH_TOKEN,
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('更新简介失败');
                }
                return response.json();
            })
            .then(result => {
                if (result) {
                    alert('个人简介已更新');
                } else {
                    throw new Error('更新操作未成功');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert(`更新简介失败: ${error.message}`);
            });
    }

    // 修改管理员密码
    function changeAdminPassword() {
        const userId = currentAdmin.userId;
        const oldPassword = document.getElementById('oldPassword').value;
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

        if (!oldPassword || !newPassword || !confirmPassword) {
            alert('请填写所有密码字段');
            return;
        }

        if (newPassword !== confirmPassword) {
            alert('两次输入的新密码不一致');
            return;
        }

        if (newPassword.length < 6) {
            alert('新密码长度至少为6个字符');
            return;
        }

        // 调用后端API修改密码
        fetch(`${API_BASE}/admin/profile/password?userId=${userId}&oldPassword=${oldPassword}&newPassword=${newPassword}`, {
            method: 'PUT',
            headers: {
                'Authorization': AUTH_TOKEN,
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('修改密码失败');
                }
                return response.json();
            })
            .then(result => {
                if (result) {
                    alert('密码修改成功，请重新登录');
                    localStorage.removeItem('userInfo');
                    localStorage.removeItem('token');
                    window.location.href = 'login.html';
                } else {
                    throw new Error('旧密码不正确');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert(`修改密码失败: ${error.message}`);
            });
    }

    // 充值余额
    function rechargeAdminBalance() {
        const userId = currentAdmin.userId;
        const amount = parseFloat(document.getElementById('rechargeAmount').value);

        if (isNaN(amount) || amount <= 0) {
            alert('请输入有效的充值金额');
            return;
        }

        // 调用后端API充值余额
        fetch(`${API_BASE}/admin/profile/recharge?userId=${userId}&amount=${amount}`, {
            method: 'POST',
            headers: {
                'Authorization': AUTH_TOKEN,
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('充值失败');
                }
                return response.json();
            })
            .then(newBalance => {
                alert(`成功充值 ¥${amount.toFixed(2)}，当前余额: ¥${newBalance.toFixed(2)}`);
                // 刷新个人管理页面显示新余额
                loadProfileManagement();
            })
            .catch(error => {
                console.error('Error:', error);
                alert(`充值失败: ${error.message}`);
            });
    }

    // 辅助函数
    function closeModal() {
        document.getElementById('detailModal').style.display = 'none';
    }

    function closeDeleteModal() {
        document.getElementById('confirmDeleteModal').style.display = 'none';
    }

    function generatePagination(currentPage, totalPages, callback, keyword = '') {
        let paginationHtml = '';
        const maxVisiblePages = 5;
        let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
        let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

        // 调整起始页确保显示maxVisiblePages个页码
        if (endPage - startPage + 1 < maxVisiblePages) {
            startPage = Math.max(1, endPage - maxVisiblePages + 1);
        }

        for (let i = startPage; i <= endPage; i++) {
            paginationHtml += `
            <button class="pagination-btn ${i === currentPage ? 'active' : ''}"
                    onclick="${callback}(${i}, '${keyword}')">${i}</button>`;
        }

        return paginationHtml;
    }

    function getItemTypeName(type) {
        switch(type) {
            case 'user': return '用户';
            case 'goods': return '商品';
            case 'order': return '订单';
            case 'comment': return '评论';
            default: return '项目';
        }
    }
</script>
</body>
</html>